<template>
	<view class="box">
		<view class="image">
		</view>
		<view class="header-box">
			<view class="logo">
				<view class="left">
					<view class="txt-one">
						{{data.name}}
					</view>
					<view class="txt-two">
						{{data.en_name}}
					</view>
					<view class="txt-three">
						<view class="tag-one tag" v-for="(item,index) in data.ranks" :key="index"
							v-if="item.brand!==null">
							{{item.brand}}:{{item.order}}
						</view>
					</view>
				</view>

				<!-- 清华大学 -->
				<view class="school">
					<img :src="data.logo" alt="" />
					<br />
					<!-- <img src="../../static/img/xing.png" alt="" /> -->
				</view>
			</view>

			<view class="bottom">
				<view class="bottom-one">
					<img src="../../static/img/dibiao.png" alt="" />
					<text>{{data.city}}</text>
				</view>
				<view class="bottom-two">
					<img src="../../static/img/C.png" alt="" />
					<text>官网: {{data.url}}</text>
				</view>
			</view>
		</view>
		<!-- 分割线 -->
		<view class="hr"></view>
		<!-- tap切换 -->
		<view class="tap">
			<view class="tap-one" v-for="(item,index) in data.detail" :key="index" @click="tapOne(item)"
				v-if="item.name!=='案例'" :class="flag==item.name?'change':''">
				{{item.name}}
			</view>
		</view>
		<view class="box-one" v-if="flag=='本科'">
			<!-- tap2 -->
			<!-- <view class="taps">
				<view class="taps-one" @click="tapsOne">
					<a href="#a" :class="flag==0?'selected':''">录取信息</a>
				</view>
				<view class="taps-two" @click="tapsTwo">
					<a href="#b" :class="flag==1?'selected':''">专业列表</a>
				</view>
				<view class="taps-three" @click="tapsThree">
					<a href="javascript:;" :class="flag==2?'selected':''">留学费用</a>
				</view>
				<view class="taps-four" @click="tapsFour">
					<a href="#d" :class="flag==3?'selected':''">语言要求</a>
				</view>
				<view class="taps-five" @click="tapsFive">
					<a href="#f" :class="flag==4?'selected':''">申请材料</a>
				</view>
			</view> -->
			<!-- 录取信息 -->
			<view class="message">
				<view class="title" id="a" v-if="lqxx.length!==0">
					录取信息
				</view>
				<view v-if="lqxx.length!==0">
					<view class="sides" v-for="(item,index) in lqxx.content" :key="index">
						<view class="left">
							{{item.name}}
						</view>
						<view class="right">
							{{item.value}}
						</view>
					</view>
				</view>
				<!-- 专业列表 -->
				<view class="list" id="b" v-if="zylb.length!==0">
					<view class="tit">
						<view class="left">
							专业列表
						</view>
						<view class="right">
							查看更多<img src="../../static/img/qianjin.png" alt="" />
						</view>
					</view>
					<view class="list-content" v-for="(item,index) in zylb.content">
						<view class="top">
							<view class="left">
								<text class="txt-top">{{item.name}}</text>
								<br />
								<text class="txt-bottom">{{item.en_name}}</text>
							</view>
							<view class="right">
								<!-- <img src="../../static/img/xing.png" alt="" /> -->
							</view>
						</view>
					</view>
				</view>
				<!-- 分割线 -->
				<view class="hr"></view>
			</view>
			<!-- 语言要求 -->
			<view class="language" id="d" v-if="yyyq.length!==0">
				<view class="tit">
					语言要求
				</view>
				<view class="frame">
					<!-- <view class="btn">
						咨询雅思课程
					</view> -->
					<view class="tag">
						雅思
					</view>
					<view class="txt">
						{{yyyq.content[0].value}}
					</view>
					<view class="some">
						<view class="some-one">
							<view class="prefix">
								测
							</view>
							<view class="writing">
								15分钟估出你雅思水平
							</view>
						</view>
						<view class="some-two">
							<view class="prefix">
								课
							</view>
							<view class="writing">
								必看:雅思真经小白课
							</view>
						</view>
						<view class="some-three">
							<view class="prefix">
								练
							</view>
							<view class="writing">
								雅思王听力语料库
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 分割线 -->
			<view class="hr"></view>
			<!-- 申请材料 -->
			<view class="material" id="f" v-if="sqcl.length!==0">
				<view class="tit">
					申请材料
				</view>
				<!-- <view class="ol">
					{{sqcl.content}}
				</view> -->
				<!-- <u-text></u-text> -->
				<u--text :text="sqcl.content"></u--text>
			</view>
			<!-- 分割线 -->
			<view class="hr"></view>
			<!-- 奖学金 -->
			<view class="scholarship" v-if="jxj.length!==0">
				<view class="tit">
					奖学金
				</view>
				<!-- 		<view class="txt">
					{{jxj.content}}
				</view> -->
				<u--text :text="jxj.content" colo></u--text>
			</view>
			<!-- 分割线 -->
			<view class="hr"></view>
			<!-- 资深留学总监 -->
			<view class="majordomo">
				<view class="tit">
					资深留学总监
				</view>
				<view class="imgx_box">
					<img class="imgicon" :src="item.mentorPhoto" alt="" v-for="(item,index) in mentors" :key="index"
						@click="onclick(item)" />
				</view>
			</view>
		</view>
		<view class="box-two" v-if="flag=='硕士'">
			<!-- tap2 -->
			<!-- <view class="taps">
				<view class="taps-one" @click="tapsOne">
					<a href="#a" :class="flag==0?'selected':''">录取信息</a>
				</view>
				<view class="taps-two" @click="tapsTwo">
					<a href="#b" :class="flag==1?'selected':''">专业列表</a>
				</view>
				<view class="taps-three" @click="tapsThree">
					<a href="javascript:;" :class="flag==2?'selected':''">留学费用</a>
				</view>
				<view class="taps-four" @click="tapsFour">
					<a href="#d" :class="flag==3?'selected':''">语言要求</a>
				</view>
				<view class="taps-five" @click="tapsFive">
					<a href="#f" :class="flag==4?'selected':''">申请材料</a>
				</view>
			</view> -->
			<!-- 录取信息 -->
			<view class="message">
				<view class="title" id="a" v-if="lqxx1.length!==0">
					录取信息
				</view>
				<view v-if="lqxx1.length!==0">
					<view class="sides" v-for="(item,index) in lqxx1.content" :key="index">
						<view class="left">
							{{item.name}}
						</view>
						<view class="right">
							{{item.value}}
						</view>
					</view>
				</view>
				<!-- 专业列表 -->
				<view class="list" id="b" v-if="zylb1.length!==0">
					<view class="tit">
						<view class="left">
							专业列表
						</view>
						<view class="right">
							查看更多<img src="../../static/img/qianjin.png" alt="" />
						</view>
					</view>
					<view class="list-content" v-for="(item,index) in zylb1.content">
						<view class="top">
							<view class="left">
								<text class="txt-top">{{item.name}}</text>
								<br />
								<text class="txt-bottom">{{item.en_name}}</text>
							</view>
							<view class="right">
								<!-- <img src="../../static/img/xing.png" alt="" /> -->
							</view>
						</view>
					</view>
				</view>
				<!-- 分割线 -->
				<view class="hr"></view>
			</view>
			<!-- 语言要求 -->
			<view class="language" id="d" v-if="yyyq1.length!==0">
				<view class="tit">
					语言要求
				</view>
				<view class="frame">
					<view class="btn">
						咨询雅思课程
					</view>
					<view class="tag">
						雅思
					</view>
					<view class="txt">
						{{yyyq1.content[0].value}}
					</view>
					<view class="some">
						<view class="some-one">
							<view class="prefix">
								测
							</view>
							<view class="writing">
								15分钟估出你雅思水平
							</view>
						</view>
						<view class="some-two">
							<view class="prefix">
								课
							</view>
							<view class="writing">
								必看:雅思真经小白课
							</view>
						</view>
						<view class="some-three">
							<view class="prefix">
								练
							</view>
							<view class="writing">
								雅思王听力语料库
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 分割线 -->
			<view class="hr"></view>
			<!-- 申请材料 -->
			<view class="material" id="f" v-if="sqcl1.length!==0">
				<view class="tit">
					申请材料
				</view>
				<view class="ol">
					{{sqcl1.content}}
				</view>
			</view>
			<!-- 分割线 -->
			<view class="hr"></view>
			<!-- 奖学金 -->
			<view class="scholarship" v-if="jxj1.length!==0">
				<view class="tit">
					奖学金
				</view>
				<view class="txt">
					{{jxj1.content}}
				</view>
			</view>
			<!-- 分割线 -->
			<view class="hr"></view>
			<!-- 资深留学总监 -->
			<view class="majordomo">
				<view class="tit">
					资深留学总监
				</view>
				<view class="image">
					<view class="imgx">
						<!-- <img src="https://img.wilmer.com.cn/admin/2024/3-19/nv.jpg" alt="" /> -->
					</view>
					<view class="imgy">
						<!-- <img src="https://img.wilmer.com.cn/admin/2024/3-19/nan.jpg" alt="" /> -->
					</view>
				</view>
			</view>
		</view>
		<view class="box-three" v-if="flag=='简介'">
			<view class="title">
				校园简介
			</view>
			<view class="" v-for="(item,i) in data2.children" :key="i" v-if="item.name!=='学校图片'">
				<view class="tit">
					{{item.name}}
				</view>
				<view class="txt">
					{{item.content}}
				</view>
			</view>
		</view>
		<view class="box-four" v-if="flag=='数据'">
			<view class="title" id="a" v-if="data3.length!==0">
				院校数据
			</view>
			<view v-if="data3.length!==0">
				<view class="sides" v-for="(item,index) in data3.content" :key="index">
					<view class="left">
						{{item.name}}
					</view>
					<view class="right">
						{{item.value}}
					</view>
				</view>
			</view>
		</view>
		<!-- foot -->
		<!-- <view class="Floats">
			<button open-type="contact">
				客服
			</button>
		</view> -->
		<!-- 		<view class="foot">
			<view class="foot-one">
				<img src="../../static/img/xuexiao.png" alt="" />
				<br />
				<text>我的选校</text>
			</view>
			<view class="foot-two">
				<img src="../../static/img/liuyan.png" alt="" />
				<br />
				<text>咨询留学</text>
			</view>
			<view class="foot-three">
				加选校
			</view>
		</view> -->
		<!-- 导师详情 -->
		<u-popup :show="show" mode="bottom" :round="10" @close="close" :overlay='!Qrshow' zIndex='10070'
			@touchmove.stop.prevent="moveHandle">
			<view class="daoshi">
				<image class="imgLogo" :src="detal.mentorPhoto" mode=""></image>
				<view class="name">{{detal.mentorName}}</view>
				<view class="mentorTag1">{{detal.mentorTag1}}</view>
				<view class="mentorTag2">{{detal.mentorTag2}}</view>
				<view class="box">{{detal.mentorBio}}</view>
				<view class="btn" @click="onDetail()">咨询申请方案</view>
			</view>
		</u-popup>
		<!-- 二维码 -->
		<u-popup :show="Qrshow" mode="center" :round="10" bgColor='transparent' zIndex='10075' @close="Qrclose"
			@touchmove.stop.prevent="moveHandle">
			<view>
				<image style="width: 300rpx;height: 300rpx;" :src="detal.qrCode" mode=""></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		schoolMain,
		mentorsList
	} from '@/common/api/homePage.js'
	export default {
		data() {
			return {
				// 选中变色
				flag: '本科',
				id: '',
				data: [],
				lqxx: [],
				zylb: [],
				yyyq: [],
				sqcl: [],
				jxj: [],
				lqxx1: [],
				zylb1: [],
				yyyq1: [],
				sqcl1: [],
				jxj1: [],
				data2: [],
				data3: [],
				mentors: [], // 导师列表
				detal: {},
				show: false,
				Qrshow: false
			}
		},
		methods: {
			tapOne(index) {
				// console.log(index)
				this.flag = index.name
				this.SchoolMain(this.id)

			},
			// 院校详情接口
			SchoolMain(id) {
				uni.showLoading({
					title: '加载中'
				});
				schoolMain(id).then(res => {
					setTimeout(() => {
						uni.hideLoading();
					}, 500)
					this.data = res.data.data;
					for (let j = 0; j < this.data.detail.length; j++) {
						j
						if (this.data.detail[j].name == '本科') {
							for (let i = 0; i < this.data.detail[j].children.length; i++) {
								if (this.data.detail[j].children[i].name == '录取信息') {
									this.lqxx = this.data.detail[j].children[i]
								}
								if (this.data.detail[j].children[i].name == '专业列表') {
									this.zylb = this.data.detail[j].children[i]
								}
								if (this.data.detail[j].children[i].name == '语言要求') {
									this.yyyq = this.data.detail[j].children[i]
								}
								if (this.data.detail[j].children[i].name == '申请材料') {
									this.sqcl = this.data.detail[j].children[i]
								}
								if (this.data.detail[j].children[i].name == '奖学金') {
									this.jxj = this.data.detail[j].children[i]
								}
							}
						}
						if (this.data.detail[j].name == '硕士') {
							for (let i = 0; i < this.data.detail[j].children.length; i++) {
								if (this.data.detail[j].children[i].name == '录取信息') {
									this.lqxx1 = this.data.detail[j].children[i]
								}
								if (this.data.detail[j].children[i].name == '专业列表') {
									this.zylb1 = this.data.detail[j].children[i]
								}
								if (this.data.detail[j].children[i].name == '语言要求') {
									this.yyyq1 = this.data.detail[j].children[i]
								}
								if (this.data.detail[j].children[i].name == '申请材料') {
									this.sqcl1 = this.data.detail[j].children[i]
								}
								if (this.data.detail[j].children[i].name == '奖学金') {
									this.jxj1 = this.data.detail[j].children[i]
								}
							}
						}
						if (this.data.detail[j].name == '简介') {
							this.data2 = this.data.detail[j]
							// console.log(this.data2 , 123)
						}
						if (this.data.detail[j].name == '数据') {
							// console.log(33333333333);
							this.data3 = this.data.detail[j]
						}
					}
				})
			},
			onBack() {
				uni.navigateBack()
			},
			onclick(item) {
				console.log(item)
				this.detal = item
				this.show = true
			},
			onDetail() {
				this.Qrshow = true
			},
			close() {
				this.show = false
				// console.log('close');
			},
			Qrclose() {
				this.Qrshow = false
			},
			moveHandle() {
				return false;
			}
		},
		onLoad(options) {
			this.id = options.id
			// console.log(options);
			this.SchoolMain(options.id)
			mentorsList().then(res => {
				console.log(res, '001')
				this.mentors = res.data.rows
			})
		}
	}
</script>

<style lang="scss" scoped>
	.daoshi {
		.imgLogo {
			width: 200rpx;
			height: 200rpx;
			border-radius: 40rpx;
			margin: -60rpx auto 0;
			display: block;
		}

		.name {
			font-family: PingFang SC;
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
			text-align: center;
		}

		.mentorTag1 {
			text-align: center;
			font-family: PingFang SC;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
		}

		.mentorTag2 {
			text-align: center;
			font-family: PingFang SC;
			font-size: 24rpx;
			font-weight: 400;
			color: #EAB252;
		}

		.box {
			width: 686rpx;
			padding: 20rpx;
			border-radius: 40rpx;
			background-color: #F8F8F8;
			margin: 40rpx auto 0;
		}

		.btn {
			width: 686rpx;
			height: 100rpx;
			border-radius: 50rpx;
			margin: 40rpx auto;
			background: linear-gradient(90deg, #5E95FA 0%, #5B93F9 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
		}
	}

	.image {
		img {
			width: 100%;
			height: 266px;
		}
	}

	.header-box {
		padding: 20px 16px;
		border-radius: 20px 20px 0 0;
		background-color: #fff;
	}

	.logo {
		display: flex;
		justify-content: space-around;
	}

	.logo img:nth-child(1) {
		width: 140rpx;
		height: 140rpx;
	}

	.logo img:nth-child(3) {
		width: 50rpx;
		height: 50rpx;
		margin-top: rpx;
	}

	.school {
		margin-left: 60rpx;
		text-align: center;
	}

	.txt-one {
		font-size: 20px;
	}

	.txt-two {
		font-size: 14px;
		color: #666666;
		margin-top: 8rpx;
	}

	.txt-three {
		// display: flex;
		margin-top: 24rpx;

		.tag-one {
			background-color: #00D000;
			color: #fff;
			margin-right: 20px;
		}

		.tag-two {
			background-color: #00D000;
			color: #fff;
			margin-right: 20px;
		}

		.tag-three {
			background-color: #fff;
			color: #00D000;
		}

		.tag {
			border: 1px solid #00D000;
			display: inline-block;
			height: 26px;
			border-radius: 5px;
			line-height: 26px;
			text-align: center;
			padding: 2px 5px;
		}
	}

	.bottom img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.bottom-one,
	.bottom-two {
		display: flex;
		color: #666666;
		font-size: 16px;
	}

	.bottom-one {
		margin-top: 19px;
		margin-bottom: 12px;
	}

	.hr {
		width: 100%;
		height: 6px;
		background-color: #F8F8F8;
	}

	.tap-one {
		font-size: 18px;
		color: #666666;
	}

	.tap {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		padding-top: 15px;
		padding-bottom: 15px;
		border: 1px solid #f8f8f8;
	}

	.taps-one,
	.taps-two,
	.taps-three,
	.taps-four,
	.taps-five {
		font-size: 14px;
		color: #666666;
	}

	a {
		text-decoration: none;
		color: #000;
	}

	.taps {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		padding-top: 13px;
		padding-bottom: 13px;
		border: 1px solid #f8f8f8;
	}

	.selected {
		color: #00D000;
	}

	.message {
		padding: 40rpx 30rpx 0 30rpx;
		background-color: #fff;

		.title {
			font-size: 18px;
			margin-bottom: 36rpx;
		}
	}


	.sides {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #f8f8f8;
		padding-bottom: 20rpx;
		margin-top: 20rpx;
		font-size: 14px;

		.right {
			width: 360rpx;
		}

		.left {
			color: #666666;
		}
	}

	.list {
		padding-bottom: 40rpx;
		padding-top: 40rpx;

		.tit {
			display: flex;
			justify-content: space-between;
		}

		.left {
			font-size: 18px;
		}

		.right {
			font-size: 12px;
			color: #008FFF;

			img {
				width: 20rpx;
				height: 20rpx;
			}
		}

		.list-content {
			margin-top: 36rpx;

			.top {
				display: flex;
				justify-content: space-between;
				margin-bottom: 24rpx;

				.right {
					img {
						width: 60rpx;
						height: 60rpx;
					}
				}

				.left {
					.txt-top {
						font-size: 16px;
						margin-bottom: 4rpx;
					}

					.txt-bottom {
						font-size: 14px;
						color: #666666;
					}
				}
			}
		}
	}

	.language {
		background-color: #fff;
		padding: 40rpx 32rpx 40rpx 36rpx;

		.tit {
			font-size: 18px;
		}

		.frame {
			padding: 24rpx 28rpx 40rpx;
			box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;
			margin-top: 36rpx;
			overflow: hidden;
			position: relative;

			.btn {
				border: 1px solid #00D000;
				color: #00D000;
				padding: 12rpx 22rpx;
				border-radius: 36rpx;
				text-align: center;
				width: 200rpx;
				float: right;
			}

			.tag {
				position: absolute;
				top: 0;
				left: 0;
				background-color: #00dd00;
				color: #fff;
				font-size: 16px;
				padding: 8rpx 20rpx;
				border-radius: 12rpx;
			}

			.txt {
				font-size: 16px;
				margin-top: 88rpx;
				margin-bottom: 28rpx;
			}

			.some {
				.some-one {
					display: flex;

					.prefix {
						width: 40rpx;
						height: 40rpx;
						background-color: #FFF3F3;
						color: #F73032;
						text-align: center;
						line-height: 40rpx;
						margin-right: 16rpx;
					}

					.writing {
						font-size: 16px;
						color: #666666;
					}
				}

				.some-two {
					display: flex;
					margin-top: 20rpx;

					.prefix {
						width: 40rpx;
						height: 40rpx;
						background-color: #FFF6E7;
						color: #FFB32D;
						text-align: center;
						line-height: 40rpx;
						margin-right: 16rpx;
					}

					.writing {
						font-size: 16px;
						color: #666666;
					}
				}

				.some-three {
					display: flex;
					margin-top: 20rpx;

					.prefix {
						width: 40rpx;
						height: 40rpx;
						background-color: #F2F8FE;
						color: #4D9EFF;
						text-align: center;
						line-height: 40rpx;
						margin-right: 16rpx;
					}

					.writing {
						font-size: 16px;
						color: #666666;
					}
				}
			}
		}
	}

	.material {
		background-color: #fff;
		padding: 40rpx 30rpx;

		.tit {
			font-size: 18px;
			margin-bottom: 36rpx;
		}
	}

	.material>.ol {
		color: #666666;
		font-size: 16px;
	}

	.scholarship {
		background-color: #fff;
		padding: 40rpx 30rpx;

		.tit {
			font-size: 18px;
			margin-bottom: 36rpx;
		}

		.txt {
			color: #666666;
			// margin-left: 62rpx;
		}
	}

	.majordomo {
		height: 600rpx;
		background-color: #fff;
		padding: 40rpx 30rpx;

		.tit {
			font-size: 18px;
			margin-bottom: 36rpx;
		}

		.image {
			display: flex;

			.imgx,
			.imgy {
				width: 220rpx;
				height: 220rpx;
				overflow: hidden;
			}
		}

		.imgx_box {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding-bottom: 40rpx;

			.imgicon {
				width: 220rpx;
				height: 220rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
				border-radius: 40rpx;
			}
		}
	}


	.foot {
		width: 100%;
		height: 140rpx;
		border-top: 1px solid #ccc;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-around;

		.foot-one,
		.foot-two {
			text-align: center;
			margin-top: 20rpx;

			img {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.foot-three {
			width: 240rpx;
			height: 80rpx;
			border-radius: 30px;
			background-color: #00dd00;
			color: #fff;
			margin-top: 30rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 20px;
		}
	}

	.box-three {
		padding: 26rpx 32rpx 200rpx;
		background-color: #fff;

		.title {
			color: #000;
			font-weight: 600;
			font-size: 18px;
		}

		.tit {
			font-weight: 500;
			margin-top: 36rpx;
			margin-bottom: 30rpx;
		}

		.txt {
			color: #666666;
			font-size: 14px;
		}
	}

	.box-four {
		padding: 30rpx;
		background-color: #fff;

		.title {
			margin-top: 10rpx;
			margin-bottom: 10rpx;
			font-weight: 500;
			font-size: 18px;
		}
	}

	.change {
		color: #00D000;
	}

	.Floats {
		button {
			position: fixed;
			bottom: 120rpx;
			right: 60rpx;
			background-color: #fff;
			border: 1px solid #00D000;
			border-radius: 50%;
			line-height: 120rpx;
			background-color: #00D000;
			color: #fff;
		}
	}
</style>